import React, { useEffect } from 'react';
import { Platform } from 'react-native';

import { StyleSheet, View, Text } from 'react-native';
import { TRuler } from 'react-native-text-ruler';

const convert = (size: number) => {
  return Platform.OS === 'android' ? size : size * 1.14;
};

const TEXT = '测量文本行数哈哈哈哈哈哈哈哈哈哈。';

export default function App() {
  useEffect(() => {
    getRes();
  }, []);

  const getRes = async () => {
    const start = Date.now();
    const res = await TRuler.measureTexts([{
        texts: [TEXT, TEXT + '\n', TEXT + '\n\n', TEXT + '\n\n\n', TEXT, TEXT + '\n', TEXT + '\n\n', TEXT + '\n\n\n', TEXT, TEXT + '\n', TEXT + '\n\n', TEXT + '\n\n\n',],
        fontSize: convert(12),
        lineHeight: convert(16.33),
        maxWidth: convert(100),
      },
      {
        texts: [TEXT, TEXT + '\n', TEXT + '\n\n', TEXT + '\n\n\n', TEXT, TEXT + '\n', TEXT + '\n\n', TEXT + '\n\n\n', TEXT, TEXT + '\n', TEXT + '\n\n', TEXT + '\n\n\n',],
        fontSize: convert(13),
        lineHeight: convert(17.67),
        maxWidth: convert(100),
      },
    ]);
    console.log(Date.now() - start);
    console.log('测量结果:' + JSON.stringify(res));
  };

  const measureHeight = (event) => {
    console.log('实际高度:' + event.nativeEvent.layout.height);
  };

  return (
    <View style={styles.container}>
      <Text onLayout={measureHeight} style={styles.content}>
        {TEXT + ''}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  content: {
    backgroundColor: 'black',
    color: 'white',
    fontSize: convert(12),
    lineHeight: convert(16.33),
    width: convert(100),
  },
});
